%!TeX root=book.tex
\chapter{Σχεδίαση εφαρμογών για το σύγχρονο διαδίκτυο}
	\section{Αρχιτεκτονικές σχεδίασης διαδικτυακών εφαρμογών}
		\subsection{MVC Architecture}
		Το MVC είναι ένα πρότυπο σχεδίασης λογισμικού που έχει δημιουργηθεί για τη σωστή διατήρηση της παρουσίασης των δεδομένων και το οποίο επιτρέπει να διαχωρίζονται τα δεδομένα από τις μεθόδους που αλληλεπιδρούν με αυτά. 
		
		Ο τίτλος του προτύπου είναι μια συρραφή από τα τρία βασικά μέρη του: \textbf{Model}, \textbf{View} και \textbf{Controller} \citep{hayder07}. Μια οπτική αναπαράσταση ενός πλήρους και σωστού προτύπου MVC μοιάζει με το διάγραμμα \ref{fig:mvcImage}:
			\begin{figure}[h]
			  \centering
			  \includegraphics{images/mvc.png}
			  \caption{Model View Controller}
			  \label{fig:mvcImage}
			\end{figure}
			
		\textbf{Model} είναι το όνομα που δίνεται στη μόνιμη αποθήκευση των δεδομένων που χρησιμοποιούνται για το γενικό σχεδιασμό. Θα πρέπει να επιτρέπει την πρόσβαση για εγγραφή και επεξεργασία δεδομένων και είναι η γέφυρα μεταξύ του View και του Controller. 
		
		Μια σημαντική πτυχή του Model είναι ότι είναι τεχνικά "τυφλό". Με αυτό εννοούμε πως δεν έχει καμία σχέση ή γνώση για το τι συμβαίνει στα δεδομένα που διαβιβάζονται στο View και στον Controller. Δε ζητά ούτε επιδιώκει μια απάντηση από τα άλλα μέρη. Μοναδικός σκοπός του είναι να επεξεργάζεται τα δεδομένα ή να αναζητά και να προετοιμάζει τα δεδομένα για να τα στείλει στα άλλα μέρη. 
		
		Το Model όμως δεν μπορεί απλά να οριστεί ως μια βάση δεδομένων ή μια πύλη σε ένα άλλο σύστημα που διαχειρίζεται την επεξεργασία των δεδομένων. Το μοντέλο θα πρέπει να λειτουργήσει ως φύλακας για τα ίδια στοιχεία και να αποδέχεται όλες τις αιτήσεις που του ζητούνται.

		\textbf{View} είναι εκεί όπου εμφανίζονται τα δεδομένα τα οποία ζητήθηκαν από το μοντέλο και θεωρείται και η τελική έξοδος. Παραδοσιακά σε διαδικτυακές εφαρμογές που χτίστηκαν χρησιμοποιώντας το πρότυπο MVC, το View είναι το μέρος του συστήματος όπου υπάρχει ο κώδικας HTML. Το View  δέχεται τις εντολές από το χρήστη, ο οποίος στη συνέχεια πηγαίνει και αλληλεπιδρά με τον Controller.

		\textbf{Controller} είναι το μέρος που είναι υπεύθυνο να διαχειρίζεται τα δεδομένα εισόδου που υποβάλλει ο χρήστης και να ενημερώνει το μοντέλο αναλόγως. Το "αίμα της ζωής" του Controller είναι ο χρήστης. Χωρίς την αλληλεπίδραση με τον χρήστη ο Controller δεν έχει κανένα σκοπό. Είναι το μόνο μέρος του προτύπου με το οποίο ο χρήστης θα πρέπει να αλληλεπιδρά. 
		
		Ο Controller μπορεί να οριστεί ως συλλέκτης πληροφοριών, ο οποίος στη συνέχεια περνά τα δεδομένα στο μοντέλο που θα τα οργανώσει και θα τα αποθηκεύσει. Ο Controller είναι επίσης συνδεδεμένος μόνο με ένα View και ένα Model, καθιστώντας τον ως ένα μονόδρομο σύστημα ροής δεδομένων.


	\section{Object Relational Mapping}
	Τα αντικείμενα μιας κλάσης δεν είναι οργανωμένα με την ίδια λογική που είναι οι πίνακες μιας σχεσιακής βάσης δεδομένων. Μια σειρά ενός πίνακα μπορεί να αφορά μια άλλη σε έναν διαφορετικό (ή ακόμα και τον ίδιο) πίνακα μέσα από ένα ξένο κλειδί. Τα αντικείμενα μιας κλάσης, από την άλλη πλευρά, τείνουν να συνδέονται το ένα με το άλλο πιο οργανικά. Ένα αντικείμενο μπορεί να περιέχει ένα άλλο, και διάφορες δομές δεδομένων θα οργανώσουν τα ίδια αντικείμενα με διαφορετικούς τρόπους, συνδυάζοντας τα με νέες σχέσεις κατά το χρόνο εκτέλεσης μιας εφαρμογής. 
	
	Οι σχεσιακές βάσεις δεδομένων έχουν βελτιστοποιηθεί για τη διαχείριση μεγάλου όγκου δεδομένων σε μορφή πίνακα, ενώ οι κλάσεις και τα αντικείμενα εμπεριέχουν μικρότερα εστιασμένα κομμάτια των πληροφοριών. Αυτή η αποσύνδεση ανάμεσα στις κλάσεις και τις σχεσιακές βάσεις δεδομένων συχνά περιγράφεται ως αντικείμενο-σχεσιακή αναντιστοιχία (object-relational
impedance mismatch) \citep{zandstra10}.

	Object Relational Mapping (ORM, O/RM ή O/R Mapping) είναι μια τεχνική στην επιστήμη της πληροφορικής που επιτρέπει να αντιστοιχίζονται τα μη συμβατά δεδομένα μιας σχεσιακής βάσης δεδομένων σε δεδομένα τέτοιας μορφής που να μπορούν να επεξεργαστούν με τη μορφή αντικειμένων μιας κλάσης μιας αντικειμενοστραφούς γλώσσας προγραμματισμού. Ουσιαστικά δημιουργείται ένα ενδιάμεσο επίπεδο που απομονώνει την απευθείας πρόσβαση στο μοντέλο, όπου μπορεί να είναι μια σχεσιακή βάση δεδομένων και που μπορεί έπειτα να  χρησιμοποιηθεί πιο αποτελεσματικά από τα διάφορα μέρη μιας αντικειμενοστραφούς εφαρμογής. 
			\begin{figure}[h]
			  \centering
			  \includegraphics{images/orm.png}
			  \caption{Object Relational Mapping}
			  \label{fig:orm}
			\end{figure}
	
	Εκτός από την δυνατότατα πρόσβασης και μετατροπής των δεδομένων μιας σχεσιακής βάσης, ένα ORM σύστημα απλοποιεί την διαδικασία ανάπτυξης λογισμικού, καθώς αυτοματοποιεί τις διαδικασίες μετατροπής κάτι που έχει ως αποτέλεσμα χαμηλότερο επίπεδο προγραμματισμού και λιγότερη συντήρηση. Ο κώδικας καθίσταται περισσότερο επαναχρησιμοποιήσιμος και επίσης οι διαδικασίες είναι μικρότερες και εξαιρετικά απλοποιημένες.
	
	Έτσι επιτυγχάνεται:
	\begin{itemize}
		\item Βελτιστοποίηση συστήματος στο επίπεδο της εφαρμογής
		\item Ταχύτερη εφαρμογή και πολύ πιο εύκολα διατηρήσιμη
	\end{itemize}


	\subsection{ORM Datamapper}
	Στην εφαρμογή μας χρησιμοποιούμε το ORM DataMapper, ένα Object Relational Mapping σύστημα γραμμένο σε PHP και ειδικά προσαρμοσμένο πάνω στο framework CodeIgniter.
			\begin{figure}[h]
			  \centering
			  \includegraphics[width=65mm]{images/datamapper.png}
			  \caption{Datamapper ORM Logo}
			  \label{fig:image1}
			\end{figure}
	Είναι μια ειδική έκδοση που εκτός από τα γενικά χαρακτηριστικά του DataMapper περιλαμβάνει \citep{wanwizard14}:

	\begin{itemize}
		\item Ξένα κλειδιά πινάκων για μοναδικές σχέσεις.
		\item Την δυνατότητα να βλέπεις (view), επεξεργαστείς (edit), και να εκτελέσεις ερώτημα (query) χρησιμοποιώντας επιπλέον στήλες από πινάκες.
		\item Την δυνατότητα να συμπεριλάβει δεδομένα από μοναδικά αντικείμενα
		\item Την δυνατότητα να εκτελέσει ερωτήματα και να συμπεριλάβει δεδομένα από μεγάλου επίπεδου σχέσεις
		\item Εξαιρετικά ενισχυμένες σχέσεις που περιλαμβάνουν πολλαπλές ενώσεις μεταξύ ίδιων αντικειμένων.
		\item Την ικανότητα κάποιος να προεκτείνει το ORM πέρα από άπλες κλάσεις και να μοιραστεί αυτές τις προεκτάσεις.
		\item Την ικανότητα να κατεργαστεί υπό-ερωτήματα και να μπορεί να τα χρησιμοποιήσει σε SQL λειτουργίες
	\end{itemize}


	\section{WEB 2.0}
		\subsection{Περιγραφή}
		Ο όρος Web 2.0 (Ιστός 2.0), χρησιμοποιείται για να περιγράψει τη νέα γενιά του παγκόσμιου ιστού η οποία βασίζεται στην όλο και μεγαλύτερη δυνατότητα των χρηστών του διαδικτύου να μοιράζονται πληροφορίες και να συνεργάζονται μέσω αυτού. Αυτή η νέα γενιά είναι μια δυναμική διαδικτυακή πλατφόρμα στην οποία μπορούν να αλληλεπιδρούν χρήστες χωρίς εξειδικευμένες γνώσεις σε θέματα υπολογιστών και δικτύων.

	\subsubsection*{Χαρακτηριστικά}
	Οι σελίδες σε Web 2.0 επιτρέπουν στους χρήστες να κάνουν περισσότερες ενέργειες από ότι η απλή ανάκτηση πληροφοριών. Αντί για απλή ανάγνωση ο χρήστης μπορεί να σχολιάσει δημοσιεύματα ή να δημιουργήσει ένα λογαριασμό χρήστη ή προφίλ για μια ιστοσελίδα κάτι που του επιτρέπει αυξημένη συμμετοχή. Αυξάνοντας την έμφαση  σε αυτές τις ήδη υπάρχουσες δυνατότητες ο χρήστης ενθαρρύνεται να βασιστεί πολύ περισσότερο στον φυλλομετρητή (broswer) του ως περιβάλλον εργασίας αντί για ένα πακέτο εφαρμογών λογισμικού. Αυτό έχει ονομαστεί και ως το "δίκτυο ως πλατφόρμα". 
	
	Κύρια χαρακτηριστικά του Web 2.0 περιλαμβάνουν μεταξύ άλλων δικτυακούς τόπους κοινωνικής δικτύωσης, δημιουργία ιστοσελίδων, ατομικά δημιουργημένες πλατφόρμες και η προσθήκη ετικετών (tagging) \citep{governor09}. Οι χρήστες μπορούν να παρέχουν τα στοιχεία τους σε μια εφαρμογή Web 2.0 που βρίσκεται σε μια διαδικτυακή τοποθεσία και να ασκούν έλεγχο σε αυτά τα δεδομένα. Αυτές οι περιοχές μπορεί να έχουν μια δομή γνωστή και ως  "αρχιτεκτονική της συμμετοχής" που ενθαρρύνει τους χρήστες να προσθέτουν σημασία (semantic) στην εφαρμογή καθώς την χρησιμοποιούν.

	Το Web 2.0 προσφέρει σε όλους του χρηστές την ίδια δυνατότητα να συνεισφέρουν. Ενώ αυτό το γεγονός επιτρέπει την δυνατότητα για σοβαρή συνεργασία και συζήτηση, ωστόσο αυξάνει και την πιθανότητα για μη σοβαρή συμπεριφορά στο διαδίκτυο και στην πιθανότητα κακόβουλων πράξεων. Η αδυναμία να περιοριστούν αυτές οι ενέργειες μπορεί να περιορίσουν την επιθυμία των πραγματικά καλοπροαίρετων χρηστών να προσφέρουν και να χρησιμοποιήσουν τις δυνατότητες που προσφέρει το Web 2.0.
	
	Τα κυρία χαρακτηριστικά του Web 2.0 περιλαμβάνουν: 
	\begin{itemize}
		\item Ελεύθερη ταξινόμηση των δεδομένων. Επιτρέπει στους χρηστές ομαδικά να βρίσκουν και να επιβεβαιώσουν πληροφορίες.
		\item Πλούσια εμπειρία χρηστή. Δυναμικό περιεχόμενο το οποίο αλλάζει ανάλογα με την συμπεριφορά του χρηστή.
		\item Η πληροφορία ρέει μεταξύ όλων των ενδιαφερόμενων, κάτι το οποίο αυξάνει την πιθανότητα για σχολιασμό, βελτίωση και αξιολόγηση.
		\item Η δυνατότητα της συνδρομής. Το κέρδος συνήθως προέρχεται από την χρόνια συνεργασία μεταξύ ιστοσελίδας και χρηστών παρά από την αγορά των αγαθών μια φορά.
		\item Η συμμέτοχη του χρηστή. Οι χρηστές προσθέτουν τις πληροφορίες.
		\item Το λογισμικό σαν υπηρεσία. Οι σελίδες σε Web 2.0 προσφέρουν API τα οποία δίνουν την δυνατότητα για αυτόματη χρησιμοποίηση.
		\item Μαζική Συμμέτοχη.
		\item Διασπορά, οι πληροφορίες έρχονται από πολλές πηγές. Οι ψηφιακές πηγές και υπηρεσίες ζητούνται περισσότερο από τα φυσικά αγαθά. 
	\end{itemize}

	\subsection{HTML5}
	HTML5 είναι η πιο πρόσφατη έκδοση της γλώσσας HTML που χρησιμοποιείται και στην εφαρμογή μας. Φέρνει μια μεγάλη σειρά από καινοτομίες και απλοποιεί πολλές διεργασίες που πριν ήταν αρκετά πολύπλοκες να γίνουν. 

	Ενσωματώνει αρκετά στοιχειά της γλώσσας JavaScript μέσα σε μια μόλις ετικέτα (tag) και απαλλάσσει τους προγραμματιστές από την χρήση παλαιοτέρων πιο σύνθετων τεχνολογιών που πλέον αποσύρονται. 

	\begin{figure}[h]
		\includegraphics[width=15mm]{images/html5.png}
	\end{figure}	
	
	Μερικές από αυτές είναι \citep{w3c14}:
	\begin{itemize}
		\item Νέες ετικέτες (tags) που απλοποιούν την δομή και προσφέρουν δυνατότητα εισαγωγής σημασιολογικών εννοιών όπως: \textit{<header>}, \textit{<main>}, \textit{<dialog>}, \textit{<command>}
		\item Επικύρωση (validation) σε φόρμες εισαγωγής δεδομένων ανάλογα με τον τύπο τους
		\item Ενσωμάτωση βίντεο, ήχου αλλά και κώδικα JavaScript μέσω ειδικής ετικέτας \textit{<canvas>}
		\item Αποθήκευση στοιχείων τοπικά στον υπολογιστή του χρήστη
		\item Γεωγραφικό εντοπισμό του χρήστη με βάση την τοποθεσία από όπου είναι συνδεδεμένος στο διαδίκτυο (geolocation)
		\item Σύρε \& άφησε (Drag and Drop) σχεδόν για κάθε στοιχείο του DOM μιας ιστοσελίδας
	\end{itemize}

	\subsection{CSS3}
	CSS3 είναι η τελευταία έκδοση του προτύπου μορφοποίησης μιας HTML σελίδας όπως έχει οριστεί από το World Wide Web Consortium (W3C) και προσφέρει πλεονεκτήματα που αφορούν την απλοποίηση σε διαδικασίες που διαφορετικά θα απαιτούσαν περισσότερους πόρους. 
	
	Από τα κυρία οφέλη του είναι ότι επιτρέπει στην δημιουργία χαρακτηριστικών που υπό άλλες συνθήκες θα χρειαζόντουσαν την JavaScript για να εφαρμοστούν. Έτσι απλοποιείται κατά πολύ ο κώδικας μας. Επίσης μας δίνει την δυνατότητα δημιουργίας γραφικών που παλαιοτέρα μπορούσαμε να το κάνουμε μονό με εφαρμογές τύπου Photoshop για να δημιουργηθούν.
	
	\begin{figure}[h]
		\includegraphics[width=15mm]{images/css3.png}
	\end{figure}
		
	 Μερικές επίσης από τις καινοτομίες που φέρνει είναι :
	\begin{itemize}
		\item Media Queries
		\item Gradients
		\item Animation \& Transitions
		\item Γραμματοσειρές
		\item Φόντο με πολλαπλές εικόνες
		\item Rounded Corners 
		\item Text Shadow.
	\end{itemize}		

	\section{Responsive Design}		
	Καθώς βλέπουμε τις εξελίξεις της τεχνολογίας μπορούμε να παρατηρήσουμε ότι παράγονται όλο και περισσότερες συσκευές οι όποιες έχουν δυνατότητα σύνδεσης στο διαδίκτυο και έχουν τις ίδιες δυνατότητες με έναν παραδοσιακό ηλεκτρονικό υπολογιστή γραφείου (desktop PC). Πλέον οι κινητές συσκευές όπως τα κινητά τηλέφωνα, τα tablets ή οτιδήποτε άλλο καταλαμβάνουν ένα σημαντικό μερίδιο της αγοράς κάτι το οποίο μας οδηγεί στο γεγονός ότι όλο και περισσότεροι χρηστές επιθυμούν να πλοηγηθούν στο διαδίκτυο από τις συσκευές αυτές.
	
	Αυτό το γεγονός οδήγησε στην ανάγκη οι κατασκευαστές ιστοσελίδων να προβλέψουν ότι η δημιουργία τους θα πρέπει να εμφανίζεται σωστά σε όλους τους πιθανούς τύπους συσκευών που μπορούν να την υποστηρίξουν, ανεξάρτητα από το μέγεθος της οθόνης που αυτές οι συσκευές διαθέτουν. Από αυτήν την ανάγκη δημιουργήθηκε και ο όρος "Responsive Web Design" ο όποιος περιγράφει την προσαρμογή που πρέπει να κάνει μια ιστοσελίδα στην εκάστοτε οθόνη του χρηστή που την βλέπει \citep{spurlock13}. Αυτό πρακτικά σημαίνει ότι μια σελίδα πρέπει να εμφανίζεται σωστά από την μικρότερη οθόνη ηλεκτρονικής συσκευής μέχρι και οθόνες υψηλής ευκρίνειας (High Definition).

	Για να μπορέσουμε να το επιτύχουμε αυτό χρησιμοποιούνται 2 τρόποι σε συνδυασμό μεταξύ τους:
	\begin{itemize}
		\item Χρήση ερωτημάτων CSS (CSS media queries). Δηλαδή κώδικας CSS που εφαρμόζει διαφορετικούς κανόνες για κάθε περίπτωση ανάλογα με την ανάλυση ή τον τύπο της συσκευής που εμφανίζεται.
		\item Χρήση ρευστών (fluid) στοιχείων. Αυτά είναι στοιχεία που το μέγεθος τους ορίζεται με βάση το ποσοστό (\%) της οθόνης προβολής και όχι με συγκεκριμένο αριθμό pixel.
	\end{itemize}

	\subsection{Σύγκριση με μια Native εφαρμογή}
	Στην αμέσως προηγούμενη ενότητα έγινε κατανοητό πως μια responsive εφαρμογή ουσιαστικά προσαρμόζεται σε οποιαδήποτε οθόνη εμφανίζεται. Αλλάζει δηλαδή τις διαστάσεις ανάλογα με την συσκευή μας. Μια native εφαρμογή είναι σχεδιασμένη για μια συγκεκριμένη πλατφόρμα - λειτουργικό. Οι εφαρμογές αυτού του είδους δεν είναι κοινές ανάμεσα σε όλες τις συσκευές και οι χρήστες μπορούν να τις βρουν μόνο από τον πάροχο των εφαρμογών της εκάστοτε συσκευής ή λειτουργικού συστήματος.
	Συγκρίνοντας αυτούς τους 2 τύπους εφαρμογών εύκολα παρατηρούμε ότι στα θετικά των responsive εφαρμογών έναντι των native είναι:
	\begin{itemize}
		\item Εύκολη ανάπτυξη, συντήρηση και χαμηλό κόστος.
		\item Εύκολη πρόσβαση από όλες τις συσκευές.
		\item Η διαφήμιση είναι εξαιρετικά εύκολη.
	\end{itemize}
	
	Αντίστοιχα οι native εφαρμογές υπερτερούν σε:
	\begin{itemize}
		\item Εμπειρίες χρήστη και περιβάλλον. 
		\item Ταχύτητα και πρόσβαση για την συγκεκριμένη συσκευή.
		\item Πάρα πολλές εφαρμογές και λειτουργίες αφού δεν υπάρχουν περιορισμοί.
		\item Τα τεχνικά προβλήματα είναι λιγότερα καθώς μόνο μια πλατφόρμα υποστηρίζεται.
	\end{itemize}

	Τα πλεονεκτήματα αυτής της λύσης είναι αρκετά καθώς με το να υπάρχει ειδική έκδοση ανάλογα με την συσκευή, την κάνει πιο εύκολα προσβάσιμη σε συγκεκριμένο κοινό όπως επίσης δίνεται η δυνατότητα να εκμεταλλεύονται περισσότερες δυνατότητες όπως το GPS ή η κάμερα ενός κινητού τηλεφώνου. Επίσης με αυτόν τρόπο κάποιες εφαρμογές μπορούν να είναι πιο ελαφριές από άποψη χρήσης πόρων ή με περισσότερες δυνατότητες ανάλογα με την συσκευή στην οποία χρησιμοποιούνται.
	
	Τα μειονεκτήματα που προκύπτουν αποτελούν την αύξηση της πολυπλοκότητας της εφαρμογής καθώς χρειάζονται περισσότερες εκδόσεις ανάλογα με τις συσκευές τις οποίες υπάρχουν, όπως επίσης η δυσκολία στην συντήρηση τους.
	
	\subsection{Bootstrap}
	Bootstrap είναι ένα πλαίσιο κανόνων CSS για την δημιουργία οπτικών απεικονίσεων (frontend framework), που δίνει την δυνατότητα στους σχεδιαστές διαδικτυακών εφαρμογών να ελαχιστοποιήσουν τον χρόνο δημιουργίας μιας ιστοσελίδας από την αρχή. Αυτό επιτυγχάνεται με την χρήση ενσωματωμένων στοιχείων που παρέχει και είναι απαραίτητα για τον σχεδιασμό ενός σύγχρονου ιστότοπου \citep{spurlock13}. Περιέχει ένα σύνολο από αρχεία HTML, CSS, JavaScript καθώς και διαφορές εικόνες και γραμματοσειρές. Είναι ελεύθερο λογισμικό και χρησιμοποιείται κατά κόρον σε πολύ μεγάλο αριθμό ιστοσελίδων, ιστότοπων και γενικότερα διαδικτυακών εφαρμογών από μια μεγάλη μερίδα προγραμματιστών ανά τον κόσμο.

	\begin{figure}[h]
		\centering
		\includegraphics[width=65mm]{images/bootstrap.png}
	\end{figure}		
	
	Συγκεκριμένα περιέχει μεταξύ άλλων τις δυνατότητες για την δημιουργία ιδιαίτερα γρήγορα των εξής στοιχείων:
	 \begin{itemize}
		\item Αναπτυσσόμενα μενού
		\item Κουμπιά διαφόρων μεγεθών και χρωμάτων
		\item Φόρμες αποστολής
		\item Μενού περιήγησης
		\item Σελιδοποίηση
		\item Ετικέτες
		\item Ειδοποιήσεις
		\item Διάφορα Εφέ JavaScript
		\item Καρτέλες
		\item Λίστες
		\item Μπάρες προόδου
	 \end{itemize}
	
	Και πολλά άλλα χαρακτηριστικά που προσδίδουν μια καλαίσθητη οπτική απεικόνιση σε όποια εφαρμογή εφαρμοστούν. 
	
	Ιδιαίτερο ενδιαφέρον παρουσιάζει το γεγονός ότι οι εφαρμογές που φτιάχνονται με το Bootstrap είναι απευθείας responsive και δεν χρειάζεται κάποια ιδιαίτερη ρύθμιση των κανόνων CSS για να επιτευχθεί η προσαρμογή του περιεχομένου σε διάφορους τύπους οθονών, παρά μόνο η χρήση ειδικών κλάσεων (CSS class) στον κώδικα HTML.

	\section{Javascript, βιβλιοθήκες και frameworks}	
		\subsection{Χαρακτηριστικά}
		Η JavaScript είναι γλωσσά προγραμματισμού η οποία έχει σαν σκοπό την παράγωγη δυναμικού περιεχόμενου και την εκτέλεση κώδικα στην πλευρά του πελάτη (client side) σε διαδικτυακές εφαρμογές. Σκοπός της είναι να διαμορφώνει δυναμικά τα HTML στοιχεία και να τους δίνει πρόσθετες δυνατότητες. 
		
		Η αρχική εκδοσή της Javascript βασίστηκε ως προς την σύνταξη στην γλωσσά προγραμματισμού C και από τότε έχει εξελιχθεί αρκετά, ενσωματώνοντας πια χαρακτηριστικά από νεότερες γλώσσες. Αρχικά χρησιμοποιήθηκε κυρίως για προγραμματισμό από την πλευρά του πελάτη (client) που ήταν ο φυλλομετρητής (broswer) του χρήστη. Αυτό σημαίνει ότι η επεξεργασία του κωδικά JavaScript και η παράγωγη του τελικού περιεχόμενου HTML δεν πραγματοποιείται στο διακομιστή, άλλα μέσα στο περιβάλλον του browser. Αντίθετα άλλες γλώσσες προγραμματισμού όπως η PHP εκτελούνται αποκλειστικά στον διακομιστή (server side).
		
		Πάρα την ευρεία χρήση της JavaScript για συγγραφή προγραμμάτων σε περιβάλλον φυλλομετρητή, αξίζει να σημειωθεί ότι από την αρχή χρησιμοποιήθηκε και για την συγγραφή κωδικά από την πλευρά διακομιστή από την ίδια τη Netscape στο προϊόν LiveWire με μικρή επιτυχία. Η χρήση της JavaScript στο διακομιστή εμφανίζεται πάλι σήμερα, με την διάδοση του Node.js, ενός μοντέλου προγραμματισμού βασισμένο στα γεγονότα (event driven).
		
		Τα πλεονεκτήματα της σε σχέση με τις γλώσσες που εκτελούνται σε server είναι η δυνατότητα της ασύγχρονης φόρτωσης δεδομένων, δηλαδή η δυναμική αλλαγή ενός μέρους μιας ιστοσελίδας χωρίς να χρειαστεί η ανανέωση ολόκληρης της σελίδας. Έτσι εξοικονομούνται πόροι του συστήματος και η εξυπηρέτηση των χρηστών γίνεται με μεγαλύτερη ταχύτητα.

		\subsection{jQuery}
		H jQuery είναι μια ελαφριά JavaScript βιβλιοθήκη που λειτουργεί ανεξαρτήτου φυλλομετρητή (cross broswer) και δίνει έμφαση στην αλληλεπίδραση μεταξύ JavaScript και HTML, κυρίως μέσω της διαχείρισης του DOM κομματιού μιας ιστοσελίδας. Κυκλοφόρησε το 2006 και πλέον χρησιμοποιείται σε πάρα πολλούς διαδικτυακούς τόπους καθιστώντας την ως την πιο δημοφιλή βιβλιοθήκη JavaScript.
		
	Η βιβλιοθήκη jQuery αποτελεί ένα δωρεάν, ανοικτού κωδικά λογισμικό που η σύνταξη της έχει ως στόχο την εύκολη πλοήγηση κόμβων (nodes) ενός εγγράφου επιλέγοντας στοιχειά του DOM, δημιουργωντας animations, διαχειριζότας γεγονότα (events) αλλά και αναπτύσσοντας διαδικτυακές εφαρμογές με τεχνικές ασύγχρονης χρήσης JavaScript και XML (AJAX) που θα συναντήσουμε και σε επόμενη ενότητα. 

	\begin{figure}[h]
		\centering
		\includegraphics[width=65mm]{images/jquery.png}
	\end{figure}
	
	Η jQuery παρέχει επίσης την δυνατότητα στους προγραμματιστές να δημιουργήσουν ενθέματα (plugins) στην ίδια την βιβλιοθήκη, με τέτοιο τρόπο ώστε να την επεκτείνουν. Με την παροχή αυτής της δυνατότητας οι προγραμματιστές μπορούν να δημιουργήσουν χαμηλού επίπεδου αλληλεπιδράσεις και κινούμενα στοιχεία (animations), προχωρημένα εφέ και υψηλού επίπεδου πρόσθετα επαναχρησιμοποιήσιμα εργαλεία (widgets). 
	
	Το παραπάνω συμβάλει δραστικά στην δημιουργία ισχυρών και δυναμικών ιστοσελίδων στα πρότυπα του Web 2.0.
		Τα κύρια χαρακτηριστικά της είναι:
		\begin{itemize}
			\item Διαχείριση των DOM στοιχείων μιας HTML σελίδας.
			\item Διαχείριση των events.
			\item Διαχείριση των εφέ και της κίνησης (animation) των στοιχείων.
			\item Διευκόλυνση, τυποποίηση και απλοποίηση χρήσης AJAX
			\item Επεκτασιμοτητα και δημιουργία ενθεμάτων (plugins).
			\item Υποστήριξη σε όλους τους σύγχρονους φυλλομετρητές.
		\end{itemize}

		\subsection{AJAX}
		Τα αρχικά AJAX αναφέρονται στο \textbf{A}synchronous \textbf{JΑ}vaScript and \textbf{X}ML, και περιγράφουν ένα σύνολο ενεργειών το οποίο συμβαίνει στην την πλευρά του πελάτη (client side) για την ασύγχρονη επικοινωνία με τον εξυπηρετητή (client) και προσδίδει στις διαδικτυακές εφαρμογές χαρακτήρα αλληλεπίδρασης.
		
		Το δυνατό χαρακτηριστικό της τεχνολογίας AJAX είναι το γεγονός ότι οι εφαρμογές μπορούν να λαμβάνουν δεδομένα από τον διακομιστή ασύγχρονα στο παρασκήνιο χωρίς να παρεμβαίνουν στην υπόλοιπη σελίδα, δίνοντας έτσι την εμπειρία μιας αδιάκοπης εφαρμογής στον τελικό χρήστη. Τα δεδομένα συνήθως λαμβάνονται μέσω του αντικείμενου XMLHttpRequest, του οποίου πάρα το όνομα δεν είναι απαραίτητη η χρήση της γλώσσας XML, και μέσω αυτού οι αιτήσεις στον διακομιστή γίνονται ασύγχρονες.
		
		Η χρήση της τεχνολογίας AJAX έχει συνεισφέρει μεγάλο ποσοστό στην ραγδαία εξέλιξη των διαδραστικών και δυναμικών εφαρμογών σε ιστοσελίδες, στα πλαίσια του Web 2.0. Αξίζει να σημειωθεί ότι η τεχνολογία AJAX δεν είναι μια τεχνολογία από μόνη της άλλα ένας συνδυασμός τεχνολογιών. Η χρήση της JavaScript σε συνδυασμό με το αντικείμενο XMLHttpRequest που αναφέραμε προηγουμένως υπάρχει για να καλύψει τον χρόνο που κάνει μια σελίδα για να φορτώσει. 
		
		Δηλαδή με την χρήση της τεχνολογίας αυτής δεν έχουμε εκ νέου φόρτωση της σελίδας για κάθε ενέργεια του χρήστη, πάρα μόνο την φόρτωση συγκεκριμένης τεχνολογίας. Το παραπάνω είναι ιδιαίτερα σημαντικό καθώς μας προσφέρει μεγαλύτερη ταχύτητα και σαφώς λιγότερη κατανάλωση εύρους ζώνης του δικτύου (bandwidth), αφού πλέον δεν φορτώνεται όλη η σελίδα άλλα μόνο το κομμάτι που θέλουμε να ανανεώσουμε.
		
		Άξιο αναφοράς εκτός από τα σπουδαία θετικά της τεχνολογίας αυτής, είναι και μερικά συνηθισμένα αρνητικά της:
		\begin{itemize}
			\item Οι διεπαφές που χρησιμοποιούν AJAX είναι συνήθως δυσκολότερες στην υλοποίηση τους καθαρά λόγω του γεγονότος ότι είναι δυναμικές.
			\item Οι σελίδες που δημιουργούνται δυναμικά με AJAX δεν είναι δυνατόν να κάνουν "πίσω" στους φυλλομετρημένες με την συνηθισμένη λειτουργία που γνωρίζουμε καθώς ξεκινάει ολόκληρη η διαδικασία από την αρχή.
			\item Έχει τρωτά σημεία και οι προγραμματιστές πρέπει να είναι σε θέση να γνωρίζουν και άλλες τεχνολογίες για να μπορούν να κάνουν σημαντική πρόοδο με αυτήν.
			\item Μπορεί να οδηγήσει σε αύξηση του χρόνου απόκρισης μιας εφαρμογής, καθώς οι εφαρμογές που χρησιμοποιούν AJAX συνήθως έχουν περισσότερες αιτήσεις από το συνηθισμένο.
		\end{itemize}
		
	\section{PHP frameworks}
	Εκτός από το κομμάτι της εμφάνισης (frontend) μιας σελίδας υπάρχει και εκείνο το κομμάτι οπού δημιουργούνται και εφαρμόζονται όλες οι λειτουργίες και οι δυνατότητες της εφαρμογής. Έτσι όπως και στο frontend υπάρχουν και εδώ κάποια frameworks τα οποία έχουν ως σκοπό να μας εξοικονομήσουν πολύτιμο χρόνο και να μειώσουν την περιττή δουλειά. Περιέχουν κάποια βασικά και συνηθισμένα κομμάτια κώδικα έτοιμα και εύκολα επεκτάσιμα ώστε να μπορούμε να τα επεξεργαστούμε και να τα φέρουμε στα μέτρα μας χωρίς να χρειαστεί να κάνουμε κάτι από την αρχή.
	
	Ουσιαστικά τα πλεονεκτήματα τους είναι:
	\begin{itemize}
		\item Πολύ γρήγορη ανάπτυξη μιας εφαρμογής λόγω των πολλών δυνατοτήτων που δίνονται στον προγραμματιστή.
		\item Ευκολία στην συντήρηση και στην επέκταση της εφαρμογής στο μέλλον και της προσθήκης καινούριων δυνατοτήτων ή της αφαίρεσης κάποιων αλλιώς πιθανώς ξεπερασμένων.
		\item Μεγαλύτερη ασφάλεια από την άποψη ότι θα η εφαρμογή που θα δημιουργήσουμε θα εφαρμόζει καλές και εφαρμοσμένες γενικές προγραμματιστικές τεχνικές καθώς αυτά τα frameworks ανανεώνονται συνεχώς για να συμβαδίζουν με τις εξελίξεις.
		\item Πολλές πρόσθετες λειτουργίες και βιβλιοθήκες.
		\item Μεγάλη κοινότητα χρηστών που μπορεί να υποστηρίξει τον προγραμματιστή.
	\end{itemize}

	Υπάρχουν πολλά διαθέσιμα PHP frameworks για να διαλέξουμε. Παίζει σημαντικό ρολό η σωστή επιλογή του καθώς πολλά είναι σχεδιασμένα για διαφορετικό είδος διαδικτυακών εφαρμογών. Έτσι τα βασικά κριτήρια για να επιλέξουμε το σωστό framework είναι:
	\begin{itemize}
		\item Το μέγεθος της εφαρμογής που θέλουμε να φτιάξουμε. Μερικά frameworks είναι κατάλληλα για μικρές και άπλες εφαρμογές και αλλά για μεγάλες και σύνθετες.
		\item Η έκδοση της PHP που θέλουμε να χρησιμοποιήσουμε καθώς δεν υποστηρίζουν όλα τα frameworks τις ίδιες εκδόσεις.
		\item Η εξοικείωση μας με την γλωσσά της PHP. Ανάλογα το framework θα χρειαστεί να γράψουμε μικρά η μεγάλα κομμάτια κώδικα, αλλά και να μάθουμε τον τρόπο λειτουργίας του συγκεκριμένου framework που ποικίλει σε πολυπλοκότητα.
		\item Πολλές φόρες το ποσό δημοφιλές είναι ένα framework, καθώς όσο μεγαλύτερη κοινότητα υποστήριξης έχει τόσο γρηγορότερα τα προβλήματα που προκύπτουν μπορούν να λυθούν. Επίσης θα είναι πιο εύκολο και για εμάς να βρούμε εύκολα λύσεις στα δικά μας προβλήματα στην ανάπτυξη.
		\item Μερικές πρόσθετες λειτουργίες που μπορεί να δίνει μόνο το συγκεκριμένο και να τις χρειαζόμαστε απαραίτητα.
		\item Τέλος η δική μας εξοικείωση και αυτοπεποίθηση ότι μπορούμε να το εφαρμόσουμε σωστά.
	\end{itemize}

		\subsection{CodeIgniter}
		Στην δική μας εφαρμογή χρησιμοποιήσαμε το Framework CodeIgniter.  
		\begin{figure}[h]
			\centering
			\includegraphics[width=65mm]{images/codeigniter.png}
		\end{figure}
		Αποτελεί ένα από πιο διάσημα PHP Framework ανοιχτού κώδικα (open source) που είναι βασισμένο στην αρχιτεκτονική MVC. Το CodeIgniter απευθύνεται σε αυτούς που θέλουν:
		\begin{itemize}
			\item Εξαιρετική απόδοση.
			\item Μεγάλη συμβατότητα με τυποποιημένους  παρόχους ιστοφιλοξενίας (hosting providers) που τρέχουν ποικιλία εκδόσεων και configuration της PHP.
			\item Ένα framework που απαιτεί μικρή διαμόρφωση.
			\item Δεν απαιτεί χρήση γραμμής εντολών.
			\item Δεν έχει περιορισμούς κωδικοποίησης.
			\item Αποφεύγει την πολυπλοκότητα και ευνοεί τις άπλες λύσεις.
			\item Σαφές, μεγάλο documentation και μια μεγάλη κοινότητα βοήθειας από πίσω του.
		\end{itemize}
			
 Γνωρίζοντας αυτά τα χαρακτηριστικά θα πρέπει να επισημάνουμε ότι το CodeIgniter δεν προορίζεται:
		\begin{itemize}			
			\item Για αυτούς που δεν έχουν επαρκή γνώση της PHP και της HTML.
			\item Για αυτούς που θέλουν να κάνουν ένα site γρήγορα και άπλα, όπως θα έκαναν με μια CMS εφαρμογή.
			\item Για αυτούς που θέλουν να φτιάχνουν άπλες σελίδες με λίγα χαρακτηριστικά.
		\end{itemize}

		Διάφορα χαρακτηριστικά του CodeIgniter \citep{ellislab14}
		\begin{itemize}
			\item Όπως αναφέραμε ήδη είναι ένα application framework.
			\item Παρέχεται δωρεάν.
			\item Αληθινά ελαφρύ.
			\item Γρήγορο.
			\item Παρέχει καθαρά URLs.
			\item Περιέχει ένα μεγάλο αριθμό από πολύ χρήσιμες βιβλιοθήκες που χρησιμοποιούνται ευρέως.
			\item Εύκολα επεκτάσιμο.
			\item Λεπτομερώς τεκμηριωμένο.
		\end{itemize}


